<template>
    <div class="home">
      <h1>Demo1</h1>
      <p>Home page content</p>

   <h2>{{ str }}</h2>

   <h3>{{ num }}</h3>


   <h2>学生姓名{{studenNames}}</h2>
   <hr>
   <p v-for="(item,index) in studenNames" >
{{ index }}--{{ item }}
</p>


   <h2>学生姓名{{person}}</h2>


   <input type="button" value="点击" @click="changNum"/>
    </div>

    <hr>
    <p v-for="item in student">{{ item.id }}--{{ item.name }}</p>

  </template>
  
  <script setup lang="ts">
  //在Vue先要声明响应式数据 reactive --作用
 
import { reactive,toRefs } from 'vue'
  //数据
  let data:any=reactive({
    str:'hello world',
    num:100,
    studenNames:["张三","李四","王五"],
    person:{
      name:'张三',
      age:18,
      sex:'男'
  
    },
    student:[
        {id:1,name:'张三'},
        {id:2,name:'李四'},
        {id:3,name:'王五'}
        
    ]
  })
  let {str,num,studenNames,person,student}=toRefs(data)
  //函数
  const changNum=()=>{
    console.log("我被调用了")
    //num.value++;
    person.value.age++;
  }
  </script>
  
  <style scoped>
  
  </style>